import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep'
import styles from '@/assets/css/guest.module.css';

export default () =>
{
    let [page, SetPage] = useState(1)
    let [list, SetList] = useState([])
    let [hasMore, SethasMore] = useState(false) //是否更多数据

    // 定义右侧滑动按钮
    const RightBtn = [
        {
            key: 'delete',
            text: '删除住客',
            color: 'danger'
        }
    ]

    //一进来数据请求
    React.useEffect(() => {
        GetGuestData()
    }, [])

    //数据请求
    const GetGuestData = async () =>
    {
        let params = {
            busid: React.business.id,
            page
        }

        // 发起请求
        let result = await React.request.post('/guest/GuestIndex', params)

        //说明没有更多数据
        if(result.code == 0)
        {
            SethasMore(false)
            return false
        }else
        {
            //有查询到数据
            SethasMore(true)
            SetPage(page + 1)
            SetList(list.concat(result.data))
        }
    }

    //下拉刷新
    const OnRefresh = async () =>
    {
        //清空数据
        SetPage(1)
        SethasMore(true)
        SetList([])

        //延迟，并请求数据
        await sleep(1000)
        GetGuestData()
    }

    //上拉加载
    const LoadMore = async () =>
    {
        await sleep(1000)
        await GetGuestData()
    }

    //删除方法
    const GuestDelete = async (gid: number) =>
    {
        //弹出对话框
        React.UI.Dialog.confirm({
            title: '删除提醒',
            content: '是否确认删除住客信息',
            onConfirm: async () =>
            {
                //组装数据
                let params = {
                    busid: React.business.id,
                    id: gid
                }
                //发送请求
                let result = await React.request.post('/guest/GuestDel', params)

                if(result.code == 0)
                {
                    //删除失败
                    React.toast(result.msg)
                    return false
                }

                //删除成功，刷新列表
                React.toast(result.msg, () => OnRefresh())
            }
        }).catch(() => {})
    }

    return (
        <>
            {/* 下拉刷新 */}
            <div className={styles.list}>
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    {/* 列表结构 */}
                    <React.UI.List>
                        {list.map((item: any, key: number) => (
                            <React.UI.SwipeAction
                                key={key}
                                rightActions={RightBtn}
                                onAction={GuestDelete.bind(this, item.id)}
                            >
                                <React.UI.List.Item
                                    key={key}
                                    description={item.mobile}
                                    onClick={() => React.navigate(`/guest/edit?gid=${item.id}`)}
                                >
                                    {item.nickname}({item.gender_text})
                                </React.UI.List.Item>
                            </React.UI.SwipeAction>
                        ))}
                    </React.UI.List>

                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll
                        loadMore={LoadMore}
                        hasMore={hasMore}
                        threshold={0}
                    />

                </React.UI.PullToRefresh>
            </div>

            {/* 添加按钮 */}
            <div className={styles.AddGuest}>
                <Link to="/guest/add">添加住客</Link>
            </div>
        </>
    )
}